<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>音乐播放器</title>
    <style>
        #control_strip_volume{
            position: absolute;
            height: 15px;
            background: green;
        }
    </style>
</head>
<body>
    <!-- 控制区 -->
    <button id="prev">上一曲</button>
    <button id="btnPlay">播放</button>
    <button id="btnPause">暂停</button>
    <button id="btnStop">停止</button>
    <button id="next">下一曲</button>
    |
    <button id="soundIncrease">音量+</button>
    <button id="soundDecreases">音量-</button>
    <button id="mute">静音</button>
    |
    <button id="speedUp">速度+</button>
    <button id="speedDown">速度-</button>
    <br>
    <div style="color: #2c3eff;margin-top: 10px">
        播放状态：<span class="playStatus">无播放</span>
        |
        音量：<span class="volumeText"></span>
        |
        速度：<span class="speedText"></span>
    </div>

    <!-- 播放器标签 -->
    <audio id="player" class="player" src="" ></audio>

    <div style="margin-top: 20px;width: 800px;height: 165px;">
        <div style="float: left;">
            <img id="cover_img" src="./image/default.jpg" alt="封面" width="80px">
        </div>
        <div style="float: left;margin-left: 10px;width: 435px;height: 155px;">
            <div style="width: 100%;height: 20px;">
                <div class="startTime" style="float: left;">00:00</div>
                <div class="endTime" style="float: right">00:00</div>
                <div id="progressMusicBox" style="width: 340px;height: 15px;margin: 0 auto;position: relative;top: 3px;">
                    <div id="progressMusic" style="position: absolute;width: 0%;height: 15px;background: green;z-index: 99"></div>
                    <div id="buffered" style="position: absolute;width: 0%;height: 15px;background: orange;"></div>
                    <div style="width: 100%;height: 15px;background: #26a3ec;"></div>
                </div>
            </div>
            <div style="width: 100%;height: 50px;margin-top: 10px;">
                <div>音量可视化展现：（音量条是通过绑定监听器改变的）</div>
                <div id="control_strip_volume_box" style="position: relative;width: 100px;margin-top: 2px;">
                    <div id="control_strip_volume" style="width: 0%"></div>
                    <div style="width: 100%;height: 15px;background: #26a3ec;"></div>
                </div>
                <div style="margin-top: 15px;font-size: 13px;border:1px solid #000"><span style="color: red;">监听器的作用在此，顶部的的音量按钮与可视化音量条元素毫无关系，但绑定了监听器后，可视化音量条就会受插件音量的变化发生改变。</span><span style="color: blue;">故此开发者在绑定监听器后，音量的控制方法转交由开发者自己设定，凡是改变了插件音量就会改变可视化音量条</span></div>
            </div>
        </div>
        <div style="float: left; width: 260px; height: 35px; border: 1px solid black;font-size: 13px;margin-left: 10px;">绿色为进度条，黄色为缓冲条，蓝色为底背景条</div>
    </div>
</body>
<script type="text/javascript" src="js/MusicPlayer.js"></script>
<script>
    var playerId = '.player';           //播放器 audio 标签
    var coverImgId = '#cover_img';      //封面图 img 标签
    /****** 音乐资源 ******/
    var music = 'http://download.cwmoo.cn/upload/list25/sublist70/1557496522.mp3';   //音乐资源1 （来源对象存储，我不排除清空对象存储音乐文件的可能）
    var nextMusic = 'http://download.cwmoo.cn/upload/list25/sublist70/1557496774.mp3';     //音乐资源2 （来源对象存储，我不排除清空对象存储音乐文件的可能）
    /****** 封面图资源 ******/
    var photo = './image/1.jpg';        //封面图1
    var nextPhoto = './image/2.jpg';    //封面图2


    window.onload = function (ev) {

        //创建播放器对象
        var player = new MusicPlayer(playerId,coverImgId,{
            'volume':0.5,       //初始音量大小（可以不设置）
            'music':music,      //初始音乐播放路径
            'photo':photo       //初始封面图
        });

        //播放按钮
        var btnPlay = document.querySelector('#btnPlay');
        btnPlay.addEventListener('click',function () {
            // player.play();
            //设置播放完毕后执行的动作
            let object = {
                'id':123,
                'name':'愤怒的小鸟'
            };
            player.play().setActionsAfterPlayback('play',function () {
                console.log(object)
            });
        });

        //暂停按钮
        var btnPause = document.querySelector('#btnPause');
        btnPause.addEventListener('click',function () {
            player.pause();

            let object = {
                'id':123,
                'name':'愤怒的小鸟'
            };
            player.pause().setActionsAfterPlayback(function () {
                console.log(object)
            });
        });

        //停止按钮
        var btnStop = document.querySelector('#btnStop');
        var endTime = document.querySelector('.endTime');
        var progressMusic = document.querySelector('#progressMusic');
        var buffered = document.querySelector('#buffered');
        btnStop.addEventListener('click',function () {
            player.stop(function () {
                endTime.innerHTML = '00:00';
                buffered.style.width = '0%';
                progressMusic.style.width = '0%';
            });
        });

        //上一曲
        var prev = document.querySelector('#prev');
        prev.addEventListener('click',function () {
            player.setMusic(music).setCoverImage(photo).change().play();
        });

        //下一曲
        var next = document.querySelector('#next');
        next.addEventListener('click',function () {
            player.setMusic(nextMusic).setCoverImage(nextPhoto).change().play();
        });

        //音量HTML显示文本
        var volumeText = document.querySelector('.volumeText');
        volumeText.innerHTML = player.getVolume();

        //音量增加
        var soundIncrease = document.querySelector('#soundIncrease');
        soundIncrease.addEventListener('click',function () {
            player.volumeUp();
            volumeText.innerHTML = player.getVolume();
        });

        //音量降低
        var soundDecreases = document.querySelector('#soundDecreases');
        soundDecreases.addEventListener('click',function () {
            player.volumeDown();
            volumeText.innerHTML = player.getVolume();
        });

        //绑定音量控制条点击事件
        var volumeBar = document.querySelector('#control_strip_volume_box');
        volumeBar.addEventListener('click', function(event){
            player.setVolumeProgress(event, this);   //传入 event 与 this
            volumeText.innerHTML = player.getVolume();
        });

        //静音
        var mute = document.querySelector('#mute');
        mute.addEventListener('click',function () {
            if (player.mute()){     //判断当前是否处于静音状态，是就取消静音
                player.mute(false);
            }else{
                player.mute(true);  //静音
            }
        });

        //JS 外部调用 setPlayProgress
        var progressMusicBox = document.querySelector('#progressMusicBox');
        progressMusicBox.addEventListener('click', function(event){
            player.setPlayProgress(event, this);   //传入 event 与 this
        });

        //速度HTML显示文本
        var speedText = document.querySelector('.speedText');
        speedText.innerHTML = player.getSpeed();

        //速度+
        var speedUp = document.querySelector('#speedUp');
        speedUp.addEventListener('click',function () {
            player.speedUp();
            speedText.innerHTML = player.getSpeed();
        });
        //速度-
        var speedDown = document.querySelector('#speedDown');
        speedDown.addEventListener('click',function () {
            player.speedDown();
            speedText.innerHTML = player.getSpeed();
        });


        //强烈建议以下监听器在创建播放器对象后直接添加
        //初始化，监听进度条
        player.addProgressEventListener('#progressMusic','.startTime','.endTime');
        //初始化，监听音量控制条
        player.addVolumeProgressEventListener('#control_strip_volume');
        //初始化，监听缓冲条
        player.addBufferedProgressEventListener('#buffered');
        //初始化，监听播放状态
        var playStatus = document.querySelector('.playStatus');
        player.addPlayStatusEventListener(function () {
            playStatus.innerHTML = '正在播放';
        },function () {
            playStatus.innerHTML = '无播放';
        });

        //播放完成后执行的动作（请注意，这不是监听器，可以设置在程序里面，且可以无限次设置）
        player.setActionsAfterPlayback('other',function () {
            player.setMusic(nextMusic).setCoverImage(nextPhoto).change().play();
        });
    };
</script>
</html>